<template>
	<view>
		<view class="uni-form-item uni-column">
			<view class="with-fun" style="margin-top: 10px;">
				<input class="uni-input" v-model="inputValue" :disabled="codedsb" type="text" confirm-type="done" focus placeholder="输入你的手机号" placeholder-style="color:#999" maxlength="11"/>
				<button type="primary" :disabled="codedsb" :style="{'color':codedsb?'#999':'#E17503'}" class="ymmm u-f u-f-ac"  @tap="getCheckNum">{{!codetime?'获取验证码':codetime+' s'}}</button>
			</view>
			<view class="with-funyz" style="margin-top: 10px;">
				<input class="uni-input" type="text" v-model="code" confirm-type="done" placeholder="验证码" placeholder-style="color:#999" maxlength="6" />
			</view>
		</view>
		<button class="onname" :style="{'background':disabled?'#999':'#E17503'}" :disabled="disabled"  type="primary" @tap="onOKname()">确 认</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputValue: '',
				code: '',
				disabled:true,
				codedsb:false,
			
				codetime:0
			}
		},
		watch:{
			inputValue(val){
				this.OnBtnChange();
			},
			code(val){
				this.OnBtnChange();
			}
		},
		methods: {
			// 验证手机号码
			isPhone(){
				let mPattern = /^1[345678]\d{9}$/; 
				return mPattern.test(this.inputValue);
			},
			// 改变按钮状态
			OnBtnChange(){
				console.log(this.inputValue)
				if( this.inputValue.length>=11 && this.code>=1){
					this.disabled=false; return;
				}
				this.disabled=true;
			},
			onKeyInput(event){
				this.code = event.target.value
				let lens = event.target.value
				let telss = this.inputValue
				if(lens.length>=1){
					//this.dbled=false
				}else{
					//this.dbled=true
				}
			},
			onOKname(){
				uni.navigateBack({
					delta:1
				})
			},
			async getCheckNum(){
				console.log(this.codetime)
				if(this.codetime > 0) return;
				// 验证手机号合法性
				if(!this.isPhone()){
					return uni.showToast({ title: '请输入正确的手机号码',icon:"none" });
				}
				// 请求服务器，发送验证码
				
			
				// 发送成功，开启倒计时
				this.codetime=60;
				this.codedsb=true;
				let timer=setInterval(()=>{
					this.codetime--;
					if(this.codetime < 1){
						clearInterval(timer);
						this.codetime=0;
						this.codedsb=false;
					}
				},1000);
			}
		}
	}
</script>

<style scoped>
	.title {
		padding: 10upx 25upx;
	}
	.with-fun{
		background: #f8f8f8;
		position: relative;
	}
	.with-fun:after{
		position: absolute;
		content: '手机号';
		height: 50px;
		line-height: 50px;
		top: 0px;
		left: 20px;
		font-size: 32upx;
	}
		.with-funyz{
		background: #f8f8f8;
		position: relative;
	}
	.with-funyz:after{
		position: absolute;
		content: '验证码';
		height: 50px;
		line-height: 50px;
		top: 0px;
		left: 20px;
		font-size: 32upx;
	}
	.uni-input{
		height: 50px;
		line-height: 50px;
		font-size: 32upx;
		background: #f8f8f8;
		padding-left: 80px;
		color: #666;
	}
	.uni-icon-clear,
	.uni-icon-eye {
		color: #999;
	}
	.ymmm{
		height: 50px;
		color: #F17503;
		padding-right: 30upx;
		font-size: 28upx;
		border: 0upx!important;
		background: transparent!important;
	}
	.ymmm:after{
		border: none;
	}
	.onname{
		width: 94%;
		margin: 20upx auto;
		background: -webkit-linear-gradient(left top, #E49315 , #E17503); /* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(bottom right, #E49315, #E17503); /* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(bottom right, #E49315,#E17503); /* Firefox 3.6 - 15 */
		background: linear-gradient(to bottom right, #E49315 , #E17503); /* 标准的语法（必须放在最后） */
	}
	.onnames{
		width: 94%;
		margin: 20upx auto;
		background: -webkit-linear-gradient(left top, #f1f1f1 , #f9f9f9); /* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(bottom right, #f1f1f1, #f9f9f9); /* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(bottom right, #f1f1f1,#f9f9f9); /* Firefox 3.6 - 15 */
		background: linear-gradient(to bottom right, #f1f1f1 , #f9f9f9); /* 标准的语法（必须放在最后） */
	}
</style>
